<template>
  <view class="media-preview" @click="handleClose">
    <view class="close-btn" @click.stop="handleClose">
      <image src="/static/icons/close.svg" class="close-icon" />
    </view>
    
    <view class="media-container" @click.stop>
      <video v-if="isVideo(url)" 
        :src="url"
        class="preview-video"
        controls
        autoplay
      />
      <image v-else
        :src="url" 
        mode="aspectFit"
        class="preview-image"
      />
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  url: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['close'])

const isVideo = (url) => {
  return /\.(mp4|webm|ogg|mov)$/i.test(url)
}

const handleClose = () => {
  emit('close')
}
</script>

<style lang="scss" scoped>
.media-preview {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn {
  position: fixed;
  top: 40rpx;
  right: 40rpx;
  width: 60rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.close-icon {
  width: 32rpx;
  height: 32rpx;
}

.media-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image,
.preview-video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
</style>